<!DOCTYPE html>
<html class="x-admin-sm">
    <head>
        <meta charset="UTF-8">
        <title>报修管理系统</title>
        <meta name="renderer" content="webkit">
   		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
   		<link rel="stylesheet" href="/css/font.css">
		<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
        <link rel="stylesheet" href="/css/xadmin.css">
        <script src="/lib/layui/layui.js" charset="utf-8"></script>
        <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
        <!--[if lt IE 9]>
            <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
            <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
    <body>
        <form class="layui-form layui-col-space5" id="recForm">
        	<!-- 报修时间 -->
        	<div class="layui-form-item">
        		<input type="hidden" id="idhidden" name="id"/>
        	</div>
       		<div class="layui-form-item">
            	<label for="start" class="layui-form-label"><span class="x-red">*</span>报修时间</label>
                <div class="layui-input-inline">
	                <div class="layui-input-inline">
				    	<input class="layui-input" autocomplete="off" placeholder="报修时间" name="repair_time" id="start">
				    </div>
				 </div>
				<!--<div class="layui-form-mid layui-word-aux"><span class="x-red">*</span>不可修改</div> -->
       		</div>
       		<!-- 预约方式 -->
            <div class="layui-form-item">
	            <label for="appointment" class="layui-form-label"><span class="x-red">*</span>预约方式</label>
	            <div class="layui-input-inline" id="appointment">
			       <div class="layui-input-inline layui-show-xs-block">
		                <select name="appointment" id="appt">
		                    <option value="0">预约方式</option>
		                    <option value="1">上门服务</option>
		                    <option value="2">到店维修</option>
		                    <option value="3">邮寄</option>
		                </select>
		            </div>
	            </div>
            </div>
            <!-- 预估价格 -->
            <div class="layui-form-item">
            	<label for="est_price" class="layui-form-label"><span class="x-red">*</span>预估价格</label>
            	<div class="layui-input-inline">
                	<input type="number" id="est_price" name="est_price" required="" lay-verify="email" autocomplete="off" class="layui-input">
            	</div>
				<div class="layui-form-mid layui-word-aux">RMB</div>
            </div>
            <!-- 预估完成时间 -->
            <div class="layui-form-item">
                <label for="end" class="layui-form-label"><span class="x-red">*</span>预估完成时间</label>
                <div class="layui-input-inline">
<!--                 	<div class="layui-inline layui-show-xs-block"> -->
					<div class="layui-input-inline">
                   		<input class="layui-input"  autocomplete="off" placeholder="预估完成时间" name="end" id="end">
                    </div>
                </div>
            </div>
            <!-- 报修状态 -->
            <div class="layui-form-item">
	            <label for="repair_status" class="layui-form-label"><span class="x-red">*</span>报修状态</label>
	            <div class="layui-input-inline" id="repair_status">
			       <div class="layui-input-inline layui-show-xs-block">
		                <select name="repair_status" id="status">
		                    <option value="0">报修状态</option>
		                    <option value="1">进行中</option>
		                    <option value="2">结束</option>
		                    <option value="3">撤销</option>
		                </select>
		            </div>
	            </div>
            </div>
            <!-- 确定修改 -->
            <div class="layui-form-item">
	            <label for="L_repass" class="layui-form-label"></label>
	            <button class="layui-btn" lay-filter="add" id="updateBtn">确定修改</button>
            </div>
        </form>
		<script>
			function setApptAndStatus(appt,status){
				document.getElementById("appt")[appt].selected=true;
				document.getElementById("status")[status].selected=true;
			}
			//数据回显
        	$(function(){
        		//拿到当前页面的链接地址
            	var val = window.location.href;
            	// 拿到链接地址传递的id
            	var id = val.split("?")[1].split("=")[1];
            	if(null == id || undefined == id){
            		alert("系统出错,请重新选择");
            		window.location.go(-1);
            	}
            	$("#idhidden").val(id);
            	$.ajax({
            		type:"get",
            		url:"http://localhost:8080/record/queryOneRec.do",
            		data:{
            			"id":id
            		},
            		dataType:"json",
            		success:function(response){
            			console.log(response);
             			$("#est_price").val(response.data.estPrice);
						$("#start").attr("value",response.data.repairTime); 
						$("#end").attr("value",response.data.estCpmlTime); 
    					if(response.data.appointment!=0 || response.data.repairStatus!=0){
    						setApptAndStatus(response.data.appointment,response.data.repairStatus);
    					}
            		}
            	})
        	})
			
     	    //更新数据
         	$("#updateBtn").click(function(){
         		$.ajax({
             		type:"post",
             		url:"http://localhost:8080/record/updateRec.do",
             		//data:$("#recForm").serialize(),	无法获取下拉菜单的值
             		data:{
             			"id":parseInt($("#idhidden").val()),
             			"repairTime":$("#start").val(),
             			"appointment":$("#appt").val(),
             			"estPrice":$("#est_price").val(),
             			"estCpmlTime":$("#end").val(),
             			"repairStatus":$("#status").val(),
             		},
             		dataType:"json",
             		success:function(response){
             			//修改成功返回上一级页面
             			if(response.status==0){
             				alert("修改成功");
             				window.location.href="rec-list.html";
             			}else{
             				alert("修改失败,请重试");
             			}
             		}
             	})
         		return false;
         	})
     </script>
    </body>

    <script>
    	
      layui.use(['jquery','layer','element','laydate','form'], function(){
      	var $=layui.jquery;
    	var layer=layui.layer;
    	var element=layui.element;
    	var laydate = layui.laydate;
        var  form = layui.form;


        //执行一个laydate实例
        laydate.render({
          elem: '#start' //指定元素
          ,type: 'datetime'
        });
		
        //执行一个laydate实例
        laydate.render({
          elem: '#end' //指定元素
          ,type: 'datetime'
        });

      });

    </script>

</html>